<script setup lang="ts">
import Avatar from "@/components/Avatar.vue";
import { reactive, ref, watch } from "vue-demi";
import { useGameStore } from "@/stores/Game";
import { storeToRefs } from "pinia";

// // 游戏运行状态
const Game = useGameStore();
const { user } = Game;
let percentage = ref(0);
// const { user } = storeToRefs(Game);
watch(user, (newValue) => {
  let a = user.xpSinceLastLevel / user.xpUntilNextLevel;
  a = Number(a.toFixed(2)) * 100;
  a = Number(a.toFixed(0))
  percentage.value = a;
});

// 进度条颜色
let color = ref("");
</script>
<template>
  <el-card class="header">
    <div class="content">
      <!-- 用户头像 -->
      <div class="avatar">
        <Avatar />
      </div>

      <!-- 用户信息 -->
      <div class="useInfo">
        <div class="userTop">
          <div class="userName">{{ user.name }}</div>
          <!-- <div class="setting">设置</div> -->
        </div>
        <!-- 等级 -->
        <div class="userLow">
          <div class="level">lv {{ user.level }}</div>
          <!-- 进度条 -->
          <div class="progress">
            <el-progress
              type="line"
              :percentage="percentage"
              :color="color"
              class="progressItem"
              :stroke-width="12"
            />
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<style lang="less" scoped>
.header {
  width: 90%;
  margin: 0 5%;

  .content {
    display: flex;
    // 头像

    .avatar {
      // flex: 2;
      // width: 30%;
      // height: 20%;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
    }
    // 用户信息
    .useInfo {
      display: flex;
      flex-direction: column;
      // align-items: ;
      justify-content: space-between;
      // flex: 8;
      // height: 80px;
      // height: 100%;
      // width: 100px;
      width: 70%;
      margin-left: 4%;

      // 上
      .userTop {
        display: flex;
        justify-content: space-between;

        // 用户名称
        .userName {
          background-color: #eae5e3;
          color: #cc5d20;
          // box-shadow: 10%;
          border-radius: 20px;
          padding: 3px;
        }
      }

      // 下
      .userLow {
        display: flex;
        justify-content: space-between;
        // 等级
        .level {
        }
        // 进度条
        .progress {
          width: 70%;
          position: relative;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}
</style>
